<template>
	<!-- 拒绝退货 & 修改理由 弹窗 -->
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content" :style="'height:' + wH +'px'">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="cate-list">
				<view class="e-i-box" v-if="act == 1">
					<input class="input-value"
						:value="inputValue" 
						:placeholder="inputStoreTip"
						type="number"
						@blur="onBlur"
						@input="inputHandler" />
				</view>
				<view class="e-i-box"  v-else>
					<view class="tit-box">
						<text>{{dismItem.title}}</text>
						<text>{{dismItem.qty_min_1}}</text>
					</view>
					<view class="input-box">
						<view class="input-item" v-for="(item,index) in dismList" :key="index">
							<view class="s-tit">{{item.title}}</view>
							<input class="input-value"
								:value="item.qty_min" 
								:placeholder="inputStoreTip"
								type="number"
								@input="dismInputHandler($event,item,index)" />
						</view>
					</view>
				</view>
			    <view class="e-i-box">
					<input class="input-value"
						:value="notesValue" 
						:placeholder="inputRemaskTip"
						type="text"
						@input="notesHandler" />
				</view>	
			</view>
			<view class="btn" @click="sure">{{sureTxt}}</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import util from '../../js/util/Util.js';
	import config from "../../js/conf/Config.js";
	
	import lang from "../../js/conf/Lang.js";
	import https from "../../js/https/Https.js";
	
	
	export default {
		data() {
			return {
				title : "",
				sureTxt : lang.confirm,
				
				inputStoreTip : lang.inputStoreTip,
				inputRemaskTip : lang.inputRemaskTip,
				
				inputValue:"",
				notesValue:"",
				
				openShow : 0,
				callBack:null,
				act:1,
				wH:240,
				ch:"goods",
				
				sId:"",
				storeid:'',
				dismItem : null,
				dismList : [],
			};
		},
		
		watch:{
			inputValue(number) {
			},
			notesValue(str)
			{
			},
		},
		
		methods: {
			show(type,data) 
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
				}, timer);
				if(!type)return;
				this.setData(data);
			},
			
			close()
			{
				this.inputValue = "";
				this.notesValue = "";
				this.show();
			},
			
			setData(data)
			{
				this.act = data.act;
				let item = data.item;
				this.ch = data.ch
				this.storeid = data.storeid
				if(item.id)
					this.sId = item.id;
				if(item.storeid)
					this.sId = item.storeid;
				if(this.act == 1) //编辑库存
				{
					this.title = lang.modStoreTit;
					this.wH = 240;
					this.inputValue = item.qty_min;
				}
				else
				{
					this.title = lang.dismStoreTit;
					this.wH = 450;
					this.dismItem = {};
					this.dismItem.id = item.id;
					this.dismItem.title = item.title;
					this.dismItem.qty_min_1 = item.qty_min_1;
					this.setDismData(item);
				}
			},
			
			setDismData(data)
			{
				this.dismList = [];
				if(data.sub)
				{
					let arr = data.sub;
					let len = arr.length;
					for(let i = 0; i < len; i++)
					{
						let temp = arr[i];
						if(temp.sub)
						{
							let arr1 = temp.sub;
							for(let j = 0; j < arr1.length; j++)
							{
								let temp1 = arr1[j];
								let temp2 = {};
								temp2.id = temp1.id;
								temp2.specid = temp1.specid;
								temp2.title = temp.title + "/" + temp1.title;
								temp2.qty_min = "",
								this.dismList.push(temp2);
							}
						}
						else
						{
							let temp2 = {};
							temp2.id = temp.id;
							temp2.specid = temp.specid;
							temp2.title = temp.title;
							temp2.qty_min = "",
							this.dismList.push(temp2);
						}
					}
				}
			},
			
			/****编辑库存****/
			inputHandler(event)
			{
				let value = event.detail.value
				this.handlerData(value);
			},
			
			onBlur(event)
			{
				let value = event.detail.value
				this.handlerData(value);
			},
			
			handlerData(value)
			{
				this.inputValue = value;
			},
			
			dismInputHandler(event,item,index)
			{
				this.dismList[index].qty_min = event.detail.value;
			},
			
			sure()
			{
				if(this.act == 1)
				{
					this.editSubmit();
				}
				else
				{
					this.tipDism();
				}
			},
			
			editSubmit()
			{
				if(Number(this.inputValue) < 0) 
				{
					this.$msg({title:lang.moreThanZeroTip});
					return;
				}
				if(this.notesValue == "")
				{
					this.$msg({title:"请输入备注！"});
					return;
				}
				let that = this;
				let param = {};
				param.qty_min = this.inputValue;
				param.act = "change";
				param.id = this.sId;
				param.notes = this.notesValue;
				param.storeid = this.storeid
				param.ch = this.ch;
				this.submit(param);
			},
			
			getDismData()
			{
				let arr = [];
				for(let i = 0; i < this.dismList.length; i++)
				{
					let temp = {};
					temp.specid = this.dismList[i].specid;
					temp.qty_min = this.dismList[i].qty_min;
					arr.push(temp);
				}
				return arr;
			},
			
			tipDism()
			{
				if(this.notesValue == "")
				{
					this.$msg({title:"请输入备注！"});
					return;
				}
				let that = this;
				let data = {};
				data.title = lang.tipTitleTxt;
				data.content = lang.dismStoreTipTxt;
				data.showCancel = true;
				lang.showWin(data,back);
				function back(res)
				{
					if(res.confirm)
					{
						that.dismSubmit();
					}
				}
			},
			
			dismSubmit()
			{
				let param = {};
				param.act = "split";
				param.qty_min =  0 ;
				param.unit_spec_ls = this.getDismData();
				param.id = this.sId;
				param.notes = this.notesValue;
				param.ch = this.ch;
				this.submit(param);
			},
			
			submit(param)
			{
				let that = this;
				https.getGoodsStoreEdit(param,back);
				function back(data)
				{
					if(!data)return;
					if(data.status == 1)
					{
						that.$msg({title:data.msg});
						that.$emit("refrush",param);
						that.close();
					}
				}
			},
			
			notesHandler(event)
			{
				console.log(event);
				this.notesValue = event.detail.value;
			},
		},
	}
</script>
<style lang="scss">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9999;
		transition: 0.3s;
		.mask-content {
			width: 100%;
			max-height: 250px;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			.item
			{
				border-bottom: 1px solid #ECECEC;
				padding: 10px 20px;
			}
			.active
			{
				color: #3388FF;
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.item-info {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.cate-content {
			border-radius: 6px;
			overflow: hidden;
			width: 350px;
			// height: 400px;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			position: relative;
			.item-fixed-top
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 18px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.cate-content {
				transform: translateY(0);
			}
		}
	}
	.bg-color
	{
		background: #E6E6E6;
		padding: 10px;
	}
	.cate-list
	{
		padding: 10px;
		.txt-box
		{
			padding: 6px;
			color: #666;
			display: flex;
			.txt-v-1
			{
				width: 50%;
				
			}
		}
		.e-i-box
		{
			padding: 10px;
			.input-value
			{
				padding: 8px;
				border: 1px solid #EDEDED;
				border-radius: 6px;
			}
			.tit-box
			{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				border-bottom: 1px solid #EDEDED;
			}
		}
		
		// <view class="input-box">
		// 	<view class="input-item" v-for="(item,index) in dismList" :key="index">
		// 		<view class="s-tit">{{item.title}}</view>
		// 		<input class="input-value"
		// 			:value="item.qty_min" 
		// 			:placeholder="inputStoreTip"
		// 			type="number"
		// 			@input="notesHandler($event,item)" />
		// 	</view>
		// </view>
		.input-box
		{
			.input-item
			{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding-top: 10px;
			}
		}
	
	}
	.btn
	{
		cursor: pointer;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		background-color: #3388ff;
		position: absolute;
		font-size: 18px;
		bottom: 0;
	}
	.btn:active
	{
		background-color: #3285fa;
	}
	.btn:hover
	{
		background-color: #3285fa;
	}
	
</style>